<template>
	<view class="">
		<!-- background: linear-gradient(180deg,#ff7984,#ff7199 10%,rgba(255,214,41,.01) 90%); -->
		<view class="me-header" style="background: linear-gradient(180deg,#0081ff,#069cff 10%,rgba(255,214,41,.01) 90%);
			}">
			<view class="" style="padding-top: 100rpx;">
				<view class="header-box">
					<view class="" v-if="uni_id_token">
						<view class="img-box">
							<!-- {{user.avatar}} -->
							<image style="width: 134rpx;height: 134rpx;border-radius: 50%;" :src="user.avatar" mode="">
							</image>
							<!-- <image src="/static/default.jpg" mode=""></image> -->
						</view>
						<view class=""
							style="font-size: 33rpx;font-weight: bold;text-align: center;position: relative;bottom: 8rpx;">
							{{user.nickname || '--'}}
						</view>
				
					</view>
					
					<view class="" style="position: absolute;top: 67rpx;left: -28rpx;" v-else>
						<view class="not-login-container">
							<!-- #ifdef MP-WEIXIN -->
							<button @click="wxlogin1" class="accredit-button" size="mini">
								<image style="width: 48rpx;height: 48rpx;" class="margin-right-xs"
									src="../../static/huiyuan/weixin.png"></image> 授权登录
							</button>
							<!-- #endif -->
							<!-- #ifdef  MP-TOUTIAO -->
							<button @click="getUserInfo" class="accredit-button" size="mini">
								<image style="width: 48rpx;height: 48rpx;" class="margin-right-xs"
									src="../../static/huiyuan/weixin.png"></image> 授权登录
							</button>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS || H5 -->
							<button @click="toLogin" class="accredit-button" size="mini">
								登录注册
							</button>
							<!-- #endif -->
							<!-- 
							<button @click="toLogin" class="accredit-button" size="mini">
								登录注册
							</button> -->
					
					
						</view>
					</view>
			
			
				</view>
				<view class="">
					<view class="me-op3-wrapper">
						<view class="me-op3">
							<!-- #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO -->
							<view bindtap="copy" class="me-op-item">
								<button class="contact-btn" id="btnShare0" openType="contact" plain="true" size="mini"
									type="warn"></button>
								<view class="me-op-item-title flex-start">
								<!-- 	<image
										src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f192c560-89d8-49ca-aee7-06e479a9646b/451224f8-16c2-4bb1-a399-8a81b5f1f3b2.png">
									</image> -->
									<button class="contacButton" openType="contact">咨询在线客服</button>
								</view>
								<view class="">
									>
								</view>
							</view>
							<!-- #endif -->
							<view @tap="toPath('/pages/common/extension')" v-if="advertising.advertisingOpen == 1" class="me-op-item">
								<view class="me-op-item-title flex-start">
									<!-- <image src="/static/huiyuan/renwu2.png"></image> -->
									加入创作者
								</view>
								<view class="">
									>
								</view>
							</view>
							<view @tap="fuzhi" class="me-op-item"  v-if="advertising.advertisingOpen == 1">
								<view class="me-op-item-title flex-start">
									<!-- <image
										src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f192c560-89d8-49ca-aee7-06e479a9646b/451224f8-16c2-4bb1-a399-8a81b5f1f3b2.png">
									</image> -->
									我也想要这样的程序
								</view>
								<view class="">
									>
								</view>
							</view>
						
						<!-- 	<view @tap="kanguangao1Btn" class="me-op-item" v-if="vipConfig.advertisingOpen == 1">
								<view class="me-op-item-title flex-start">
									奖励中心
								</view>
								<view class="">
									>
								</view>
							</view> -->
						

							<view @tap="qingchc" class="me-op-item">
								<view class="me-op-item-title flex-start">
									<!-- <image src="/static/huiyuan/renwu2.png"></image> -->
									清除缓存
								</view>
								<view class="">
									>
								</view>
							</view>

						
						</view>
					</view>
				</view>


				<ad style="width: auto; !important" :unit-id="'m0rtoeopqd8kn3910h'"></ad>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mixinAdvertising
	} from '@/mixin/advertising.js'
	import {
		login
	} from '@/mixin/login.js'
	import {
		advertisingData11
	} from "@/mixin/advertisingData1.js"
	export default {
		mixins: [login, mixinAdvertising, advertisingData11],
		data() {
			return {
				user: {},
				openId: '',
				vipName: '',
				userDate: "",
				userDate1: "",
				vipConfig: {},
				adUnitId: "",
				uni_id_token:uni.getStorageSync('uni_id_token'),
				advertising:{}
			}
		},

		onShow() {
			this.init1()
			var user = uni.getStorageSync('user')
			if (this.uni_id_token) {
				this.getUser()
			}
			this.advertising = uni.getStorageSync('advertising')
			
			let vipConfig = uni.getStorageSync('vipConfig')
			if (vipConfig) {
				this.vipConfig = uni.getStorageSync('vipConfig')

			}
		},
		onLoad() {
			this.adUnitId = this.advertisingData1(this.advertisingDataType.videoList)
		},
		methods: {
			toPath(url){
				uni.navigateTo({
					url:url
				})
			}


		}
	}
</script>
<style>
	page{
		background: #f1f1f1 !important;
	}
</style>
<style lang="scss" scoped>
	.contact-btn {
		display: inline-block;
		position: absolute;
		width: 100%;
		height: 40px;
		background: salmon;
		opacity: 0;
	}



	.me-op3 {
		padding: 4rpx 20rpx 0rpx;
		width: 100%;
		font-size: 28rpx;
		box-shadow: 0 0 6rpx #ccc;
		border-radius: 20rpx;
		background: #fff;
	}

	.me-op-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #eee;
	}

	.me-op-item:last-child {
		border-bottom: none;
	}

	.me-op-item image {
		width: 30rpx;
		height: 30rpx;
	}

	.me-content {
		position: relative;
		bottom: 100rpx;
	}

	.V {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: -2rpx;
		top: 90rpx;
		border-radius: 50%;
	}

	canvas {
		display: block;
		position: relative;
		width: 355px;
		height: 110px;
	}

	.contacButton {
		background-color: #fff;
		margin: 0;
		font-size: inherit;
		line-height: 40rpx;
		padding: 0;
	}

	.contacButton:after {
		border: solid #fff;
	}

	.not-login-container {
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 10%;
		z-index: 99;
	}

	.blur {
		filter: blur(6rpx);
	}

	.accredit-button {
		border: 1rpx solid;
		color: #07c160;
		font-size: 36rp;
		background-color: hsla(0, 0%, 100%, .8);
		align-items: center;
		display: inline-flex;
		letter-spacing: 2rpx;
	}

	.me-op-item-title image {
		width: 46rpx;
		height: 46rpx;
		margin-right: 10rpx;
	}

	.flex-between {
		justify-content: space-between;
	}

	.flex-around,
	.flex-between {
		display: flex;
		align-items: center;
	}

	.flex-start {
		justify-content: flex-start;
	}

	.flex-end,
	.flex-start {
		display: flex;
		align-items: center;
	}

	.gap10 {
		margin-bottom: 10rpx;
	}

	.gap10,
	.gap20 {
		box-shadow: 0 10rpx 0 #f5f6f7;
	}


	.header-box {
		padding-top: 80rpx;
		height: 200rpx;
		background: #fff;
		position: relative;
		border-radius: 10rpx;
		border-bottom: 1rpx solid #ccc;

		.img-box {
			position: absolute;
			bottom: 69%;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 144rpx;
			height: 144rpx;
			border-radius: 50%;
			overflow: hidden;
			background: #c2cfd6;
		}
	}

	.me-header {
		padding: 30rpx;
		position: relative;
		height: 340rpx;
		z-index: 2;
	}
</style>
